<template>
  <div class="echarts-main">
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="
        () => {
          handleSelectBtn()
          broadcastChannel.postMessage('select')
        }
      "
      >select</el-button
    >
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="
        () => {
          handleUnSelectBtn()
          broadcastChannel.postMessage('unselect')
        }
      "
      >unselect</el-button
    >
    <div ref="echartsRef" id="main" class="charts"></div>

    <el-button type="primary" style="margin-top: 10px" @click="changeStorageTestFn"
      >changeStorageTest</el-button
    >

    <h2 style="margin-top: 10px">自定义bar, 表格里面嵌套bar</h2>
    <CustomBar style="margin-top: 10px" barWidth="100%" text="123456" />
    <CustomBar style="margin-top: 10px" barWidth="99%" text="123" />
    <CustomBar style="margin-top: 10px" barWidth="80%" text="123123465798" />
    <CustomBar style="margin-top: 10px" barWidth="70%" text="1231234" />
    <CustomBar style="margin-top: 10px" barWidth="70%" text="123123456789123456" />
    <CustomBar style="margin-top: 10px" />

    <el-table :data="tableDataComp" border style="width: 100%; margin-top: 10px">
      <el-table-column prop="column1" label="column1" width="180" />
      <el-table-column prop="column2" label="column2">
        <template #default="scope">
          <CustomBar :barWidth="scope.row.column2Ratio" :text="scope.row.column2Ratio" />
        </template>
      </el-table-column>
      <el-table-column prop="column3" label="column3">
        <template #default="scope">
          <div class="column3-box">
            <div class="column3-box-item">
              <CustomBar
                :barWidth="scope.row.column4Ratio"
                :text="scope.row.column4Ratio"
                barBgColor="#438AD0"
                boxAlign="flex-end"
                textWidth="40px"
              >
                <div class="colunm-tooltip-box">{{ scope.row.column4 }}</div>
              </CustomBar>
            </div>
            <div class="column3-box-item">
              <CustomBar
                :barWidth="scope.row.column4Ratio"
                :text="scope.row.column4Ratio"
                textWidth="40px"
              >
                <div class="colunm-tooltip-box">{{ scope.row.column4 }}</div>
              </CustomBar>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="column4" label="column4">
        <template #default="scope">
          <CustomBar :barWidth="scope.row.column3Ratio" :text="scope.row.column3Ratio" />
        </template>
      </el-table-column>
      <el-table-column prop="column5" label="column5" width="180" />
    </el-table>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

import CustomBar from '@/views/component/CurtomBar.vue'

const myChart = ref(null)

const data = [
  {
    name: '菲律宾',
    value: 8516420504,
    ratio: 6.54,
    text: '8.52B'
  },
  {
    name: '中国香港',
    value: 21929921445,
    ratio: 16.85,
    text: '21.93B'
  },
  {
    name: '孟加拉国',
    value: 6355195763,
    ratio: 4.88,
    text: '6.36B'
  },
  { name: '荷兰', value: 5665437950, ratio: 4.35, text: '5.67B' },
  { name: '巴拿马', value: 6097776133, ratio: 4.68, text: '6.1B' },
  {
    name: '利比里亚',
    value: 7334584998,
    ratio: 5.63,
    text: '7.33B'
  },
  {
    name: '新加坡',
    value: 25567345868,
    ratio: 19.64,
    text: '25.57B'
  },
  {
    name: '澳大利亚',
    value: 5175826127,
    ratio: 3.98,
    text: '5.18B'
  },
  {
    name: '马来西亚',
    value: 4360078752,
    ratio: 3.35,
    text: '4.36B'
  },
  { name: '美国', value: 2130847794, ratio: 1.64, text: '2.13B' }
]
const initFn = () => {
  const chartDom = document.getElementById('main')
  myChart.value = echarts.init(chartDom)
  const option = {
    series: [
      {
        type: 'treemap',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        data,
        roam: false,
        nodeClick: false,
        breadcrumb: {
          show: false
        },
        selectedMode: 'multiple',
        select: {
          itemStyle: {
            color: 'red'
          }
        }
        // emphasis: {
        //   itemStyle: {
        //     color: 'red'
        //   }
        // }
      }
    ]
  }

  option && myChart.value.setOption(option)
}

const dataIndex = data.map((item, i) => i + 1)
const handleSelectBtn = () => {
  myChart.value.dispatchAction({
    type: 'select',
    dataIndex
  })
}
const handleUnSelectBtn = () => {
  myChart.value.dispatchAction({
    type: 'unselect',
    dataIndex
  })
}

// 广播频道接口 (多个标签页通信  message postMessage close )
// 例：多个标签页 只有一个轮询
const broadcastChannel = ref(null)
const initBroadcastChannel = () => {
  broadcastChannel.value = new BroadcastChannel('treemap-select')
  broadcastChannel.value.addEventListener('message', messageFn)
}
const messageFn = (e) => {
  if (e.data === 'select') {
    handleSelectBtn()
  } else {
    handleUnSelectBtn()
  }
}

// storage 事件   这种方法仅在浏览器 不同标签页之间有效  即当前页监听 其他页触发事件  不能在当前页触发事件
const initLoaclstorageWatcher = () => {
  window.addEventListener('storage', (e) => {
    if (e.key === 'treemap-select') {
      console.log(e.newValue)
      console.log(e.oldValue)
    }
  })
}

// 自定义 myStorage 事件  myStorage使用的StorageEvent 也可以使用其他事件 如：CustomEvent  （目前 只知道参数有不同）
// 其他事件接口参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Event
let i = 0
let myWindow = new EventTarget() // 或者直接使用window
const changeStorageTestFn = () => {
  window.localStorage.setItem('test', ++i)
  const storageEvent = new StorageEvent('mystorage', {
    key: 'test',
    newValue: window.localStorage.getItem('test')
  })
  myWindow.dispatchEvent(storageEvent)
}
const initPageWatcher = () => {
  myWindow.addEventListener('mystorage', (e) => {
    if (e.key === 'test') {
      console.log(e.newValue)
    }
  })
}

onMounted(() => {
  initFn()
  initBroadcastChannel()
  initLoaclstorageWatcher()
  initPageWatcher()

  console.log(import.meta.url, new URL('./views/asdf', import.meta.url).href)
})

onUnmounted(() => {
  broadcastChannel.value.close()
  broadcastChannel.value.removeEventListener('message', messageFn)
})

const tableData = [
  {
    column1: 'column1',
    column2: '960.09',
    column3: '930.09',
    column4: '999',
    column5: 'column5'
  },
  {
    column1: 'column1',
    column2: '860.09',
    column3: '830.09',
    column4: '899',
    column5: 'column5'
  },
  {
    column1: 'column1',
    column2: '660.09',
    column3: '630.09',
    column4: '699',
    column5: 'column5'
  },
  {
    column1: 'column1',
    column2: '560.09',
    column3: '530.09',
    column4: '599',
    column5: 'column5'
  },
  {
    column1: 'column1',
    column2: '360.09',
    column3: '330.09',
    column4: '339',
    column5: 'column5'
  }
]

const setTableDataComp = () => {
  const column2List = tableData.map((item) => item.column2 * 1)
  const column2Max = Math.max(...column2List)

  const column3List = tableData.map((item) => item.column3 * 1)
  const column3Max = Math.max(...column3List)

  const column4List = tableData.map((item) => item.column4 * 1)
  const column4Max = Math.max(...column4List)

  return tableData.map((item) => {
    return {
      ...item,
      column2Ratio: ((item.column2 * 1) / column2Max) * 100 + '%',
      column3Ratio: ((item.column3 * 1) / column3Max) * 100 + '%',
      column4Ratio: ((item.column4 * 1) / column4Max) * 100 + '%'
    }
  })
}

const tableDataComp = ref(setTableDataComp())
</script>
<style scoped lang="scss">
.echarts-main {
  border: 1px solid #f0f0f0;
  padding: 10px;
  .charts {
    width: 500px;
    height: 300px;
  }

  .column3-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    .column3-box-item {
      width: 50%;
    }
  }
}
</style>
<style lang="scss">
.colunm-tooltip-box {
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
}
</style>
